<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生表管理</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="./common.js"></script>
</head>
<body>
    <div class="container">
        <h1>学生表管理</h1>
        <!-- 查询选项 -->
        <div>
            <select id="searchOption" onchange="toggleStudentNoInput()">
                <option value="all">查询全部</option>
                <option value="byNo">按学生编号查询</option>
            </select>
            <input type="text" id="searchStudentNo" placeholder="输入学生编号查询" style="display: none;">
            <button onclick="searchStudent()">查询</button>
        </div>
        <!-- 表格容器 -->
        <div id="tableContainer"></div>
        <!-- 添加学生表单按钮和表单 -->
        <button onclick="showAddForm()">添加学生</button>
        <div id="addForm" style="display: none;">
            <input type="text" id="name" placeholder="姓名">
            <input type="text" id="studentId" placeholder="学号">
            <input type="text" id="class" placeholder="所在班级">
            <input type="text" id="gender" placeholder="性别">
            <input type="number" id="age" placeholder="年龄">
            <input type="date" id="dob" placeholder="出生年日">
            <input type="number" id="studentNo" placeholder="学生编号">
            <input type="number" id="departmentNo" placeholder="学院编号">
            <input type="number" step="0.1" id="grade" placeholder="成绩">
            <button onclick="addStudent()">确认添加</button>
        </div>
    </div>

    <script>
        // 页面加载完成后加载学生表数据
        document.addEventListener('DOMContentLoaded', () => {
            loadTable('students');
        });

        // 显示添加学生表单
        function showAddForm() {
            document.getElementById('addForm').style.display = 'block';
        }

        // 添加学生
        async function addStudent() {
            const data = {
                姓名: document.getElementById('name').value,
                学号: document.getElementById('studentId').value,
                所在班级: document.getElementById('class').value,
                性别: document.getElementById('gender').value,
                年龄: parseInt(document.getElementById('age').value),
                出生年日: document.getElementById('dob').value,
                学生编号: parseInt(document.getElementById('studentNo').value),
                学院编号: parseInt(document.getElementById('departmentNo').value),
                成绩: parseFloat(document.getElementById('grade').value)
            };
            const success = await addData('students', data);
            if (success) {
                alert('学生添加成功');
                window.location.reload();
            } else {
                alert('学生添加失败');
            }
        }

        // 切换学生编号输入框的显示状态
        function toggleStudentNoInput() {
            const searchOption = document.getElementById('searchOption').value;
            const studentNoInput = document.getElementById('searchStudentNo');
            if (searchOption === 'byNo') {
                studentNoInput.style.display = 'inline-block';
            } else {
                studentNoInput.style.display = 'none';
            }
        }

        // 查询学生信息
        async function searchStudent() {
            const searchOption = document.getElementById('searchOption').value;
            const studentNo = document.getElementById('searchStudentNo').value;
            let data;
            if (searchOption === 'byNo') {
                if (studentNo) {
                    data = await fetchDataWithPost('students', { 学生编号: studentNo });
                    if (data.length === 0) {
                        alert('没有找到该学生编号的学生');
                        return;
                    }
                } else {
                    alert('请输入学生编号');
                    return;
                }
            } else {
                data = await fetchDataWithPost('students');
            }
            const tableElement = createTable('students', data);
            document.getElementById('tableContainer').innerHTML = '';
            document.getElementById('tableContainer').appendChild(tableElement);
        }
    </script>
</body>
</html>




<!---------------------------------------------------------------->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生表管理</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="./common.js"></script>
</head>
<body>
    <div class="container">
        <h1>学生表管理</h1>
        <div id="tableContainer"></div>
        <button onclick="showAddForm()">添加学生</button>
        <div id="addForm" style="display: none;">
            <input type="text" id="name" placeholder="姓名">
            <input type="text" id="studentId" placeholder="学号">
            <input type="text" id="class" placeholder="所在班级">
            <input type="text" id="gender" placeholder="性别">
            <input type="number" id="age" placeholder="年龄">
            <input type="date" id="dob" placeholder="出生年日">
            <input type="number" id="studentNo" placeholder="学生编号">
            <input type="number" id="departmentNo" placeholder="学院编号">
            <input type="number" step="0.1" id="grade" placeholder="成绩">
            <button onclick="addStudent()">确认添加</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            loadTable('students');
        });

        function showAddForm() {
            document.getElementById('addForm').style.display = 'block';
        }

        async function addStudent() {
            const data = {
                姓名: document.getElementById('name').value,
                学号: document.getElementById('studentId').value,
                所在班级: document.getElementById('class').value,
                性别: document.getElementById('gender').value,
                年龄: parseInt(document.getElementById('age').value),
                出生年日: document.getElementById('dob').value,
                学生编号: parseInt(document.getElementById('studentNo').value),
                学院编号: parseInt(document.getElementById('departmentNo').value),
                成绩: parseFloat(document.getElementById('grade').value)
            };
            const success = await addData('students', data);
            if (success) {
                alert('学生添加成功');
                window.location.reload();
            } else {
                alert('学生添加失败');
            }
        }
    </script>
</body>
</html> -->